import React, { useState, useEffect } from 'react';
import { menuAllApi } from '../../../apis/menuApi';
import type { DrawerProps, RadioChangeEvent } from 'antd';
import { Button, TreeSelect, Form, Input, Select, Tree, message } from 'antd';
import type { DataNode } from 'antd/es/tree';
import { addUserApi } from '../../../apis/menuApi';
import type { SelectCommonPlacement } from 'antd/es/_util/motion';

import { IAddUser } from '../../../types/user';

const { Option } = Select;
const { TextArea } = Input;
const { TreeNode } = TreeSelect;

export default function adduser() {
  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
  const [treeData, setTreeData] = useState([]);
  const [visible, setVisible] = useState(false);

  //调用生命周期
  useEffect(() => {
    menuData();
  }, []);

  const menuData = async () => {
    const res = await menuAllApi();
    console.log(res);
    setTreeData(res.rows.children);
  };

  const onExpand = (expandedKeysValue: React.Key[]) => {
    console.log('onExpand', expandedKeysValue);
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };

  const onCheck = (checkedKeysValue: React.Key[]) => {
    console.log('onCheck', checkedKeysValue);
    setCheckedKeys(checkedKeysValue);
  };

  const onSelect = (selectedKeysValue: React.Key[], info: any) => {
    console.log('onSelect', info);
    setSelectedKeys(selectedKeysValue);
  };

  const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');

  const placementChange = (e: RadioChangeEvent) => {
    SetPlacement(e.target.value);
  };

  //提交新增
  const addUser = async (values: IAddUser) => {
    if (values.roleId) {
      values.roleId = values.roleId.toString();
    }
    const rep = await addUserApi(values);
    if (rep) {
      message.success('新增成功！');
      setVisible(false);
      userData(1, 10);
    }
  };

  return (
    <>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={addUser}
      >
        <Form.Item
          name="username"
          label="角色名字"
          rules={[{ required: true }]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="password" label="角色描述">
          <TextArea rows={4} />
        </Form.Item>
        <Tree
          checkable
          onExpand={onExpand}
          expandedKeys={expandedKeys}
          autoExpandParent={autoExpandParent}
          onCheck={onCheck}
          checkedKeys={checkedKeys}
          onSelect={onSelect}
          selectedKeys={selectedKeys}
          treeData={treeData}
        />
        <Button>取消</Button>
        <Button type="primary" htmlType="submit" className="login-form-button">
          提交
        </Button>
      </Form>
    </>
  );
}
